<template>
	<a-layout class="layout">
		<!-- 使用抽取的顶部导航组件 -->
		<app-header />

		<!-- 预约设计页面 -->
		<router-view v-show="$route.path === '/reservation'"></router-view>

		<!-- 主页内容 -->
		<a-layout-content v-show="$route.path !== '/reservation'">
			<!-- 新的Hero区域 -->
			<div class="hero-section">
				<div class="hero-content">
					<h1 class="hero-title">聚合专业智慧与智能应用的企业服务平台</h1>
					<p class="hero-description">链接全国千万级知识技能人才，为全球用户提供专业高效的企业服务</p>

					<div class="search-wrapper">
						<div class="tab-nav">
							<span :class="['tab-text', { active: activeTab === 'task' }]" @click="activeTab = 'task'">任务</span>
							<span :class="['tab-text', { active: activeTab === 'talent' }]" @click="activeTab = 'talent'">人才</span>
							<span :class="['tab-text', { active: activeTab === 'service' }]" @click="activeTab = 'service'">
								服务
							</span>
						</div>

						<div class="search-bar-simple">
							<a-input
								:value="
									activeTab === 'task' ? searchText : activeTab === 'talent' ? talentSearchText : serviceSearchText
								"
								@update:value="handleInputChange"
								:placeholder="activeTab === 'task' ? '软件开发' : activeTab === 'talent' ? '搜索人才' : '搜索服务'"
								size="large"
								class="search-input"
								style="height: 50px"
							/>
							<a-button type="primary" size="large" style="height: 50px">搜索</a-button>
							<a-button type="primary" danger size="large" style="height: 50px">发布需求</a-button>
							<a-button class="help-btn" size="large" style="height: 50px">客服协助</a-button>
						</div>
					</div>
				</div>
			</div>

			<!-- 轮播图和雇主招人才部分 -->
			<div class="banner-wrapper">
				<div class="banner-section">
					<div class="banner-container">
						<!-- 左侧轮播图 -->
						<div class="banner-left">
							<div class="custom-carousel">
								<div class="carousel-slides">
									<div
										v-for="(item, index) in carouselItems"
										:key="index"
										class="carousel-slide"
										:style="{ display: currentSlide === index ? 'block' : 'none' }"
									>
										<img :src="item.image" :alt="item.title" />
									</div>
								</div>
								<div class="carousel-dots">
									<span
										v-for="index in carouselItems.length"
										:key="index - 1"
										:class="['carousel-dot', { active: currentSlide === index - 1 }]"
										@click="currentSlide = index - 1"
									></span>
								</div>
							</div>
						</div>

						<!-- 右侧雇主卡片 -->
						<div class="banner-right">
							<a-card class="employer-card">
								<div class="card-tabs">
									<div
										:class="['tab-item', { active: activeCardTab === 'employer' }]"
										@mouseenter="activeCardTab = 'employer'"
									>
										<h3>我是雇主，找人才</h3>
										<p>全国百万优质服务商，随时待命</p>
									</div>
									<div
										:class="['tab-item', { active: activeCardTab === 'talent' }]"
										@mouseenter="activeCardTab = 'talent'"
									>
										<h3>我是人才，找活儿</h3>
										<p>线上接单无忧，技能创业不愁</p>
									</div>
								</div>

								<div class="card-content" v-if="activeCardTab === 'employer'">
									<div class="feature-grid">
										<div class="feature-item">
											<img :src="xuqiu" alt="V客优享" class="feature-img" />
											<div class="feature-title">发布需求</div>
											<div class="feature-desc">订单追踪，在线确认</div>
											<a-button type="link" class="feature-btn">发布需求</a-button>
										</div>

										<div class="feature-item">
											<img :src="phone" alt="线上接单" class="feature-img" />
											<div class="feature-title">物色人才</div>
											<div class="feature-desc">海量订单，百万商机</div>
											<a-button type="link" class="feature-btn">作品大厅</a-button>
										</div>

										<div class="feature-item">
											<img :src="rencai" alt="诚信卫士" class="feature-img" />
											<div class="feature-title">预约人才</div>
											<div class="feature-desc">信任加成，商机不断</div>
											<a-button type="link" class="feature-btn">预约人才</a-button>
										</div>
									</div>
								</div>

								<div class="card-content" v-else>
									<div class="feature-grid">
										<div class="feature-item">
											<img :src="xuqiu" alt="V客优享" class="feature-img" />
											<div class="feature-title">寻找需求</div>
											<div class="feature-desc">订单追踪，在线确认</div>
											<a-button type="link" class="feature-btn">任务大厅</a-button>
										</div>

										<div class="feature-item">
											<img :src="phone" alt="线上接单" class="feature-img" />
											<div class="feature-title">接单必看</div>
											<div class="feature-desc">海量订单，百万商机</div>
											<a-button type="link" class="feature-btn">接单必看</a-button>
										</div>

										<div class="feature-item">
											<img :src="rencai" alt="诚信卫士" class="feature-img" />
											<div class="feature-title">诚信卫士</div>
											<div class="feature-desc">信任加成，商机不断</div>
											<a-button type="link" class="feature-btn">诚信保障</a-button>
										</div>
									</div>
								</div>
							</a-card>
						</div>
					</div>
				</div>
			</div>

			<!-- 服务区域 -->
			<div class="section service-section">
				<div class="section-content">
					<a-row type="flex" justify="space-between">
						<a-col :span="4" v-for="(service, index) in services" :key="index">
							<a-card hoverable class="service-card">
								<a-card-meta :title="service.title">
									<template #description>
										<span class="single-line">{{ service.description }}</span>
									</template>
								</a-card-meta>
							</a-card>
						</a-col>
					</a-row>
				</div>
			</div>

			<!-- 消息滚动区域部分 -->
			<div class="message-scroll-section">
				<a-card class="message-card">
					<div class="message-scroll-container">
						<!-- 三个并排的消息区域，每个区域使用不同的滚动效果 -->
						<div v-for="(messageGroup, groupIndex) in messageGroups" :key="groupIndex" class="message-column">
							<div class="message-content-wrapper">
								<div class="message-content-scroll" ref="messageScrollRefs">
									<div
										v-for="(message, msgIndex) in messageGroup.messages"
										:key="msgIndex"
										class="message-item"
										:class="{
											active: activeIndices[groupIndex] === msgIndex,
											'slide-up': messageGroup.effect === 'slide-up',
											'slide-down': messageGroup.effect === 'slide-down',
											fade: messageGroup.effect === 'fade',
											leaving: leavingIndices[groupIndex] === msgIndex
										}"
									>
										<div class="message-header">
											<div class="avatar-container">
												<img :src="messageGroup.avatar" :alt="message.name" class="avatar" />
											</div>
											<div class="user-info">
												<span class="user-type">{{ messageGroup.userType }}</span>
												<span class="user-name" :style="{ color: messageGroup.bgColor }">{{ message.name }}</span>
											</div>
											<div class="message-time">{{ message.time }}</div>
										</div>

										<!-- 使用简单的消息气泡 -->
										<div class="message-bubble" :style="{ backgroundColor: messageGroup.bgColor }">
											{{ message.content }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="message-footer">项目直播数据，全部来源于特创易作业交付数据</div>
				</a-card>
			</div>

			<!-- 设计师推荐 -->
			<div class="section designer-section">
				<!-- 只有标题和设计类型标签使用卡片 -->
				<a-card class="designer-header-card">
					<div class="section-header">
						<h2>办公司：企业品牌一体化VI设计</h2>
						<div class="header-right">
							<span class="question">有设计需求?</span>
							<a-button class="consult-btn">立即咨询</a-button>
							<a-button type="primary" class="evaluate-btn">评估费用</a-button>
						</div>
					</div>

					<!-- 设计类型标签 -->
					<div class="design-tags">
						<a-button class="tag-btn" @click="handleTagClick('LOGO设计')">LOGO设计</a-button>
						<a-button class="tag-btn" @click="handleTagClick('VI设计')">VI设计</a-button>
						<a-button class="tag-btn" @click="handleTagClick('品牌设计')">品牌设计</a-button>
						<a-button class="tag-btn" @click="handleTagClick('办公设计')">办公设计</a-button>
						<a-button class="tag-btn" @click="handleTagClick('品牌设计')">品牌设计</a-button>
						<a-button class="tag-btn" @click="handleTagClick('画册设计')">画册设计</a-button>
					</div>
				</a-card>

				<!-- 其他内容不使用卡片包裹 -->
				<div class="section-content">
					<!-- 案例分类 -->
					<div class="case-categories">
						<div
							v-for="(category, index) in categories"
							:key="index"
							:class="['category', { active: activeCategory === category.value }]"
							@click="changeCategory(category.value)"
						>
							{{ category.label }}
						</div>
						<div class="location-filter" @click="toggleCityDropdown">
							热门城市
							<DownOutlined />
							<!-- 城市下拉菜单 -->
							<div class="city-dropdown" v-show="showCityDropdown">
								<div class="city-list">
									<div class="city-item" v-for="(city, index) in cities" :key="index" @click.stop="selectCity(city)">
										{{ city.name }}
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 案例展示 -->
					<div class="case-showcase">
						<a-row :gutter="16">
							<a-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in filteredCases" :key="index">
								<a-card hoverable class="case-card">
									<template #cover>
										<div class="card-image-container">
											<img :src="item.image" :alt="item.title" />
										</div>
									</template>
									<div class="card-content">
										<div class="card-title">{{ item.title }}</div>
									</div>
								</a-card>
							</a-col>
						</a-row>

						<!-- 添加更多链接 -->
						<div class="more-container">
							<a class="more-text" @click="viewMore">更多</a>
						</div>
					</div>
				</div>
			</div>

			<!-- 成功案例 -->
			<div class="section case-section">
				<div class="section-content">
					<div class="section-header">
						<h2>成功案例</h2>
						<div class="case-filter">
							<a-radio-group v-model:value="activeTag" class="tag-group">
								<a-radio-button v-for="tag in caseTags" :key="tag" :value="tag">
									{{ tag }}
								</a-radio-button>
							</a-radio-group>
							<a-button type="link">
								全部案例
								<RightOutlined />
							</a-button>
						</div>
					</div>
					<a-row :gutter="[16, 16]">
						<a-col :xs="24" :sm="12" :md="8" v-for="case_ in cases" :key="case_.id">
							<a-card hoverable class="case-card">
								<template #cover>
									<img :src="case_.image" :alt="case_.title" />
								</template>
								<a-card-meta :title="case_.title" :description="case_.description">
									<template #avatar>
										<a-avatar :src="case_.designerAvatar" />
									</template>
								</a-card-meta>
								<div class="case-footer">
									<span>{{ case_.designer }}</span>
									<div class="likes">
										<LikeOutlined />
										<span>{{ case_.likes }}</span>
									</div>
								</div>
							</a-card>
						</a-col>
					</a-row>
				</div>
			</div>

			<!-- 品牌展示 -->
			<div class="section brand-section">
				<div class="section-content">
					<h2>合作品牌</h2>
					<a-row :gutter="[16, 16]">
						<a-col :xs="12" :sm="8" :md="6" :lg="4" v-for="brand in brands" :key="brand.id">
							<div class="brand-item">
								<img :src="brand.logo" :alt="brand.name" />
							</div>
						</a-col>
					</a-row>
				</div>
			</div>
		</a-layout-content>

		<!-- 回到顶部按钮 -->
		<div class="back-to-top" :class="{ show: isScrolled }" @click="scrollToTop">
			<img src="@/assets/images/home/top.png" alt="回到顶部" />
		</div>

		<!-- 联系方式图标 -->
		<div class="contact-icon">
			<div class="contact-icon-inner">
				<MessageOutlined />
				<span class="contact-text">在线咨询</span>
			</div>
		</div>

		<!-- 在线客服图标 -->
		<div class="kefu-icon" @click="showKefuMessage">
			<img src="@/assets/images/home/kefu.png" alt="在线客服" />
		</div>

		<!-- 二维码弹出区域 -->
		<div class="qrcode-popup">
			<img
				src="@/assets/images/home/erweima.png"
				alt="联系我们二维码"
				style="width: 250px; height: auto; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)"
			/>
		</div>

		<!-- 页脚 -->
		<a-layout-footer class="footer">
			<div class="footer-content">
				<a-row :gutter="[32, 32]">
					<a-col :xs="24" :sm="12" :md="6">
						<h3>关于我们</h3>
						<ul>
							<li><a href="#">公司介绍</a></li>
							<li><a href="#">加入我们</a></li>
							<li><a href="#">商务合作</a></li>
							<li><a href="#">媒体报道</a></li>
						</ul>
					</a-col>
					<a-col :xs="24" :sm="12" :md="6">
						<h3>帮助支持</h3>
						<ul>
							<li><a href="#">帮助中心</a></li>
							<li><a href="#">用户协议</a></li>
							<li><a href="#">隐私政策</a></li>
							<li><a href="#">服务条款</a></li>
						</ul>
					</a-col>
					<a-col :xs="24" :sm="12" :md="6">
						<h3>特色服务</h3>
						<ul>
							<li><a href="#">品牌设计</a></li>
							<li><a href="#">UI设计</a></li>
							<li><a href="#">包装设计</a></li>
							<li><a href="#">创意设计</a></li>
						</ul>
					</a-col>
					<a-col :xs="24" :sm="12" :md="6">
						<h3>联系我们</h3>
						<ul class="contact-info">
							<li>
								<PhoneOutlined />
								<span>400-888-8888</span>
							</li>
							<li>
								<MailOutlined />
								<span>support@techuyi.com</span>
							</li>
							<li>
								<ClockCircleOutlined />
								<span>周一至周日 9:00-18:00</span>
							</li>
						</ul>
					</a-col>
				</a-row>
				<div class="footer-bottom">
					<div class="copyright">© 2024 特创易. All rights reserved.</div>
					<div class="social-links">
						<a href="#">
							<WechatOutlined />
						</a>
						<a href="#">
							<WeiboOutlined />
						</a>
					</div>
				</div>
			</div>
		</a-layout-footer>

		<!-- 二维码弹出区域 -->
		<div class="contact-popup">
			<div class="contact-popup-inner">
				<div class="contact-popup-header">扫码咨询客服·获取报价</div>
				<div class="contact-popup-qrcode">
					<img
						src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/contact"
						alt="联系我们"
					/>
				</div>
				<div class="contact-popup-footer">
					<div class="phone-number">
						<PhoneOutlined />
						<span>400 030 8292</span>
					</div>
					<a-button class="contact-btn" type="primary">在线咨询</a-button>
				</div>
			</div>
		</div>
	</a-layout>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
import {
	SearchOutlined,
	CheckCircleOutlined,
	RightOutlined,
	StarFilled,
	LikeOutlined,
	PhoneOutlined,
	MailOutlined,
	ClockCircleOutlined,
	WechatOutlined,
	WeiboOutlined,
	MenuOutlined,
	UserOutlined,
	ArrowUpOutlined,
	CommentOutlined,
	CrownOutlined,
	AppstoreOutlined,
	SafetyCertificateOutlined,
	DownOutlined,
	MessageOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import AppHeader from '@/components/Header'; // 导入头部组件
import { message } from 'ant-design-vue';

// 导入类型
interface DesignerItem {
	id: number;
	name: string;
	title: string;
	avatar: string;
	rating: number;
	projects: number;
	tags: string[];
}

interface CaseItem {
	id: number;
	title: string;
	description: string;
	image: string;
	designer: string;
	designerAvatar: string;
	likes: number;
}

interface BrandItem {
	id: number;
	name: string;
	logo: string;
}

interface CarouselItem {
	title: string;
	image: string;
}

interface ServiceItem {
	title: string;
	description: string;
}

interface DesignServiceItem {
	key: string;
	title: string;
	updating?: boolean;
}

interface CategoryItem {
	key: string;
	title: string;
}

export default defineComponent({
	name: 'HomePage',
	components: {
		SearchOutlined,
		CheckCircleOutlined,
		RightOutlined,
		StarFilled,
		LikeOutlined,
		PhoneOutlined,
		MailOutlined,
		ClockCircleOutlined,
		WechatOutlined,
		WeiboOutlined,
		MenuOutlined,
		UserOutlined,
		ArrowUpOutlined,
		CommentOutlined,
		CrownOutlined,
		AppstoreOutlined,
		SafetyCertificateOutlined,
		AppHeader,
		DownOutlined,
		MessageOutlined
	},
	setup() {
		const router = useRouter();
		const searchText = ref<string>('');
		const talentSearchText = ref<string>('');
		const serviceSearchText = ref<string>('');
		const activeTag = ref<string>('全部');
		const showMobileMenu = ref<boolean>(false);
		const activeTab = ref<string>('task');
		const isScrolled = ref<boolean>(false);
		const activeCardTab = ref<string>('employer');
		const currentSlide = ref(0);
		const showCityDropdown = ref(false);

		// 使用防抖函数优化滚动事件处理
		const debounce = (fn: Function, delay: number) => {
			let timer: number | null = null;
			return function (this: any) {
				const args = arguments;
				if (timer) clearTimeout(timer);
				timer = window.setTimeout(() => {
					fn.apply(this, args);
				}, delay);
			};
		};

		const handleScroll = debounce(() => {
			const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
			isScrolled.value = scrollTop > 0;
		}, 50);

		onMounted(() => {
			window.addEventListener('scroll', handleScroll);
			handleScroll();

			// 自动轮播
			const interval = setInterval(() => {
				currentSlide.value = (currentSlide.value + 1) % carouselItems.length;
			}, 3000);

			onUnmounted(() => {
				clearInterval(interval);
			});

			// 为每个消息组设置不同的滚动间隔和效果
			messageGroups.value.forEach((group, groupIndex) => {
				timers.push(
					window.setInterval(() => {
						// 获取当前和下一个索引
						const currentIndex = activeIndices.value[groupIndex];
						const nextIndex = (currentIndex + 1) % group.messages.length;

						// 标记当前项为正在离开
						leavingIndices.value[groupIndex] = currentIndex;

						// 300ms后更新活跃索引并清除离开标记
						setTimeout(() => {
							activeIndices.value[groupIndex] = nextIndex;
							leavingIndices.value[groupIndex] = -1;
						}, 300);
					}, group.interval)
				);
			});
		});

		onUnmounted(() => {
			window.removeEventListener('scroll', handleScroll);
			// 清除所有定时器
			timers.forEach(timer => clearInterval(timer));
		});

		// 回到顶部函数
		const scrollToTop = () => {
			window.scrollTo({
				top: 0,
				behavior: 'smooth'
			});
		};

		// 导入图片资源
		const logoUrl = new URL('@/assets/images/home/logo.png', import.meta.url).href;
		const lunbo1 = new URL('@/assets/images/home/lunbo1.png', import.meta.url).href;
		const lunbo2 = new URL('@/assets/images/home/lunbo2.png', import.meta.url).href;
		const lunbo3 = new URL('@/assets/images/home/lunbo3.png', import.meta.url).href;
		const phone = new URL('@/assets/images/home/phone.png', import.meta.url).href;
		const rencai = new URL('@/assets/images/home/rencai.png', import.meta.url).href;
		const xuqiu = new URL('@/assets/images/home/xuqiu.png', import.meta.url).href;

		// 导航项
		const navItems = [
			{ key: 'design', title: '设计服务' },
			{ key: 'cases', title: '项目案例' },
			{ key: 'appointment', title: '预约设计' },
			{ key: 'taskhall', title: '任务大厅' },
			{ key: 'findDesigner', title: '找设计' },
			{ key: 'creativePeople', title: '创意人入驻' },
			{ key: 'other', title: '其他' }
		];

		// 轮播图数据
		const carouselItems: CarouselItem[] = [
			{
				title: '设计服务1',
				image: lunbo1
			},
			{
				title: '设计服务2',
				image: lunbo2
			},
			{
				title: '设计服务3',
				image: lunbo3
			}
		];

		// 统计数据
		const statistics: string[] = ['已为 19537 个客户完成品牌设计', '99.95% 的客户给出好评', '55786 位认证创意人'];

		// 服务数据
		const services: ServiceItem[] = [
			{
				title: '浏览上万设计案例',
				description: '有质量保障的原创设计作品'
			},
			{
				title: '需求评估',
				description: '您想要，真的要什么？'
			},
			{
				title: '找设计师',
				description: '55786位认证创意人'
			},
			{
				title: '品牌设计',
				description: '专业的品牌设计服务'
			},
			{
				title: '新服务',
				description: '更多服务内容'
			}
		];

		// 设计师数据
		const designers: DesignerItem[] = [
			{
				id: 1,
				name: 'Sarah Anderson',
				title: '资深品牌设计师',
				avatar: 'https://ai-public.mastergo.com/ai/img_res/0bf073b1e82f24da4b971d9b52923d95.jpg',
				rating: 4.9,
				projects: 128,
				tags: ['品牌设计', '包装设计']
			},
			{
				id: 2,
				name: 'Michael Chen',
				title: 'UI/UX设计专家',
				avatar: 'https://ai-public.mastergo.com/ai/img_res/99d5954848a5cb933632481c3dccebe1.jpg',
				rating: 4.8,
				projects: 156,
				tags: ['UI设计', '交互设计']
			},
			{
				id: 3,
				name: 'Emma Wright',
				title: '创意总监',
				avatar: 'https://ai-public.mastergo.com/ai/img_res/8e6ca2d5a621df6b5f9e377f7b8e7852.jpg',
				rating: 4.9,
				projects: 201,
				tags: ['品牌策略', '创意指导']
			},
			{
				id: 4,
				name: 'David Zhang',
				title: '资深平面设计师',
				avatar: 'https://ai-public.mastergo.com/ai/img_res/c5c2e2610af7ca1834827ae6dd36856c.jpg',
				rating: 4.7,
				projects: 183,
				tags: ['平面设计', '版式设计']
			}
		];

		// 案例标签
		const caseTags: string[] = ['全部', '品牌设计', 'UI设计', '包装设计', '平面设计'];

		// 案例数据
		const cases: CaseItem[] = [
			{
				id: 1,
				title: 'Global Tech品牌升级',
				description: '科技公司品牌形象重塑项目，包含logo、VI系统设计',
				image: 'https://ai-public.mastergo.com/ai/img_res/fd56788c95be5ffe8fbf6b5dccaeaa80.jpg',
				designer: 'Sarah Anderson',
				designerAvatar: 'https://ai-public.mastergo.com/ai/img_res/e79a233be18e0dcd03da77a13bbbbe58.jpg',
				likes: 1234
			},
			{
				id: 2,
				title: 'NewLife有机食品包装',
				description: '有机食品品牌包装设计，突出天然、健康理念',
				image: 'https://ai-public.mastergo.com/ai/img_res/4f12bb7bb27fdec5cf32e7104817e44e.jpg',
				designer: 'Michael Chen',
				designerAvatar: 'https://ai-public.mastergo.com/ai/img_res/aff742afbc4eb0cca7f090cd945bcf39.jpg',
				likes: 856
			},
			{
				id: 3,
				title: 'FutureCity移动应用设计',
				description: '智慧城市移动应用UI设计，简约而富有科技感',
				image: 'https://ai-public.mastergo.com/ai/img_res/ac7e53651c4f8f2b6ca1eb71fa5e4871.jpg',
				designer: 'Emma Wright',
				designerAvatar: 'https://ai-public.mastergo.com/ai/img_res/32bc9d86b723684efe4a9fc714c307c3.jpg',
				likes: 967
			}
		];

		// 品牌数据
		const brands: BrandItem[] = [
			{
				id: 1,
				name: 'TechCorp',
				logo: 'https://ai-public.mastergo.com/ai/img_res/80b5802a6ab8508135a963d6e4911983.jpg'
			},
			{
				id: 2,
				name: 'GreenLife',
				logo: 'https://ai-public.mastergo.com/ai/img_res/782b283c87e79ef077ee45b1a2e09a8c.jpg'
			},
			{
				id: 3,
				name: 'SmartBuild',
				logo: 'https://ai-public.mastergo.com/ai/img_res/1a03766f0ca931768d7e5ac3c9c9a188.jpg'
			},
			{
				id: 4,
				name: 'FreshFood',
				logo: 'https://ai-public.mastergo.com/ai/img_res/3fcb44f1a525d430adb6d139f4296dc6.jpg'
			},
			{
				id: 5,
				name: 'CloudTech',
				logo: 'https://ai-public.mastergo.com/ai/img_res/76fbdef8ea698adbdfbd712ff942e93d.jpg'
			},
			{
				id: 6,
				name: 'ArtSpace',
				logo: 'https://ai-public.mastergo.com/ai/img_res/bfe7d407002090212bce9869aa420623.jpg'
			}
		];

		// 热门标签
		const hotTags: string[] = ['LOGO套餐', '小程序开发', 'APP开发', 'VI设计', '企业官网'];

		// 设计服务数据
		const designServices: DesignServiceItem[] = [
			{ key: 'logo', title: 'LOGO设计' },
			{ key: 'vi', title: 'VI设计' },
			{ key: 'package', title: '包装设计' },
			{ key: 'shop', title: '门头设计' },
			{ key: 'mascot', title: '吉祥物设计' },
			{ key: 'ad', title: '宣传单设计' },
			{ key: 'poster', title: '海报设计' },
			{ key: 'album', title: '画册设计' },
			{ key: 'brand', title: '品牌设计' },
			{ key: 'trademark', title: '商标注册' },
			{ key: 'strategy', title: '品牌/传播策略', updating: true },
			{ key: 'ui', title: 'UI/电商设计', updating: true },
			{ key: 'video', title: '视频创意制作', updating: true },
			{ key: 'physical', title: '物料制作', updating: true }
		];

		// 项目案例分类数据
		const caseCategories = {
			// 按行业分类
			byIndustry: {
				title: '按行业',
				showAll: '全部行业 >',
				items: [
					{ key: 'enterprise', title: '企业品牌' },
					{ key: 'education', title: '教育/金融' },
					{ key: 'internet', title: '互联网/房地产' },
					{ key: 'business', title: '企业服务' },
					{ key: 'medical', title: '医疗服务' },
					{ key: 'energy', title: '化工能源' },
					{ key: 'entertainment', title: '文化娱乐/健身' },
					{ key: 'travel', title: '旅游/物流快递' },
					{ key: 'decoration', title: '家居装饰' }
				] as CategoryItem[]
			},

			// 按产品分类
			byProduct: {
				title: '按产品',
				items: [
					{ key: 'food', title: '食品/饮料' },
					{ key: 'wine', title: '酒/茶/水' },
					{ key: 'agriculture', title: '农产品/大米/油' },
					{ key: 'health', title: '保健品/药品' },
					{ key: 'daily', title: '日用品' },
					{ key: 'electronics', title: '电子/服装' },
					{ key: 'jewelry', title: '珠宝/化妆品' },
					{ key: 'furniture', title: '家具/建材' }
				] as CategoryItem[]
			},

			// 店铺品牌
			byShop: {
				title: '店铺品牌',
				items: [
					{ key: 'restaurant', title: '餐饮' },
					{ key: 'hotel', title: '酒店' },
					{ key: 'convenience', title: '便利店' },
					{ key: 'hotpot', title: '火锅店' },
					{ key: 'supermarket', title: '超市' }
				] as CategoryItem[]
			},

			// 按城市分类
			byCity: {
				title: '按城市',
				showAll: '全部城市 >',
				items: [
					{ key: 'beijing', title: '北京' },
					{ key: 'shanghai', title: '上海' },
					{ key: 'guangzhou', title: '广州' },
					{ key: 'shenzhen', title: '深圳' },
					{ key: 'hangzhou', title: '杭州' },
					{ key: 'chengdu', title: '成都' },
					{ key: 'tianjin', title: '天津' },
					{ key: 'chongqing', title: '重庆' },
					{ key: 'shenyang', title: '沈阳' },
					{ key: 'nanjing', title: '南京' },
					{ key: 'jinan', title: '济南' },
					{ key: 'zhengzhou', title: '郑州' },
					{ key: 'wuhan', title: '武汉' },
					{ key: 'changsha', title: '长沙' },
					{ key: 'xian', title: '西安' },
					{ key: 'suzhou', title: '苏州' },
					{ key: 'taiyuan', title: '太原' },
					{ key: 'fuzhou', title: '福州' },
					{ key: 'xiamen', title: '厦门' },
					{ key: 'shijiazhuang', title: '石家庄' },
					{ key: 'hefei', title: '合肥' },
					{ key: 'qingdao', title: '青岛' },
					{ key: 'dalian', title: '大连' },
					{ key: 'dongguan', title: '东莞' }
				] as CategoryItem[]
			}
		};

		// 修改messageGroups数据，使背景色更深更亮
		const messageGroups = ref([
			{
				userType: '客户',
				avatar: '/src/assets/images/home/message-header1.png',
				bgColor: '#00c853', // 更深更亮的绿色
				interval: 3000,
				effect: 'slide-up',
				messages: [
					{ name: '133****2990', content: '在项目合验阶段顺利完成了LOGO设计项目选定了7个标志...', time: '18:21' },
					{ name: '156****3478', content: '完成了品牌VI设计项目的初稿审核...', time: '16:45' },
					{ name: '189****6721', content: '对网站设计项目提出了修改意见...', time: '14:30' }
				]
			},
			{
				userType: '顾问',
				avatar: '/src/assets/images/home/message-header2.png',
				bgColor: '#2196f3', // 更深更亮的蓝色
				interval: 4000,
				effect: 'slide-down',
				messages: [
					{
						name: '贾顾问',
						content: '协助客户完成了Logo设计项目一款型协助客户完成了Logo设计项目一款型...',
						time: '17:34'
					},
					{ name: '王顾问', content: '为客户推荐了3位合适的设计师为客户推荐了3位合适的设计师...', time: '15:20' },
					{ name: '李顾问', content: '解答了客户关于项目周期的问题...', time: '13:15' }
				]
			},
			{
				userType: '创意人',
				avatar: '/src/assets/images/home/message-header3.png',
				bgColor: '#f44336', // 更深更亮的红色
				interval: 5000,
				effect: 'fade',
				messages: [
					{ name: '美艺文化', content: '在Logo设计项目中技术logo设计中提出修改意见...', time: '20:44' },
					{ name: '创意工坊', content: '完成了包装设计项目的最终交付完成了包装设计项目的最终交付...', time: '19:10' },
					{ name: '设计先锋', content: '上传了海报设计的修改稿...', time: '16:55' }
				]
			}
		]);

		// 当前活跃的消息索引
		const activeIndices = ref([0, 0, 0]);

		// 正在离开的消息索引
		const leavingIndices = ref([-1, -1, -1]);

		// 定时器数组
		const timers: number[] = [];

		// 设计案例数据
		const designCases = ref([
			{
				title: '科技logo设计',
				image: 'https://img.freepik.com/free-vector/gradient-technology-logo-template_23-2149008602.jpg'
			},
			{
				title: '建筑装饰VI设计',
				image: 'https://img.freepik.com/free-vector/corporate-identity-template-design_23-2149019863.jpg'
			},
			{
				title: 'VI设计',
				image: 'https://img.freepik.com/free-vector/gradient-ui-ux-background_23-2149052117.jpg'
			},
			{
				title: '乐器应用设计',
				image: 'https://img.freepik.com/free-vector/music-app-interface-template_23-2148607528.jpg'
			}
		]);

		const designCases2 = ref([
			{
				title: '科技logo设计',
				image: 'https://img.freepik.com/free-vector/abstract-logo-template_23-2149231567.jpg'
			},
			{
				title: '烘焙VI设计',
				image: 'https://img.freepik.com/free-vector/bakery-logo-template-design_23-2149543178.jpg'
			},
			{
				title: '高端办公家具类VI设计',
				image: 'https://img.freepik.com/free-vector/furniture-logo-concept_23-2148619623.jpg'
			},
			{
				title: '创意设计',
				image: 'https://img.freepik.com/free-vector/creative-design-logo-template_23-2149211560.jpg'
			}
		]);

		// 处理标签点击事件
		const handleTagClick = (tag: string) => {
			message.info(`您点击了${tag}，此功能将跳转到相应的设计页面`);
			// TODO: 实现跳转到相应设计页面的功能
		};

		// 分类数据
		const categories = [
			{ label: '最新案例', value: 'latest' },
			{ label: '教育/培训', value: 'education' },
			{ label: '金融', value: 'finance' },
			{ label: '互联网', value: 'internet' },
			{ label: '企业服务', value: 'enterprise' },
			{ label: '能源/制造/交通', value: 'energy' },
			{ label: '文化传媒', value: 'culture' },
			{ label: '健身', value: 'fitness' },
			{ label: '更多', value: 'more' }
		];

		// 当前选中的分类
		const activeCategory = ref('latest');

		// 切换分类
		const changeCategory = (category: string) => {
			activeCategory.value = category;
			message.info(`切换到分类: ${category}`);
		};

		// 所有案例数据 - 增加更多模拟数据
		const allCases = ref([
			// 最新案例
			{
				category: 'latest',
				items: [
					{
						title: '科技logo设计',
						image: 'https://img.freepik.com/free-vector/gradient-technology-logo-template_23-2149008602.jpg'
					},
					{
						title: '建筑装饰VI设计',
						image: 'https://img.freepik.com/free-vector/corporate-identity-template-design_23-2149019863.jpg'
					},
					{
						title: 'VI设计',
						image: 'https://img.freepik.com/free-vector/gradient-ui-ux-background_23-2149052117.jpg'
					},
					{
						title: '乐器应用设计',
						image: 'https://img.freepik.com/free-vector/music-app-interface-template_23-2148607528.jpg'
					},
					{
						title: '创意LOGO设计',
						image: 'https://img.freepik.com/free-vector/abstract-logo-template_23-2149234256.jpg'
					},
					{
						title: '电商品牌VI设计',
						image: 'https://img.freepik.com/free-vector/e-commerce-logo-template-design_23-2149282715.jpg'
					},
					{
						title: '医疗APP界面设计',
						image: 'https://img.freepik.com/free-vector/medical-app-interface_23-2148627943.jpg'
					},
					{
						title: '餐饮品牌设计',
						image: 'https://img.freepik.com/free-vector/gradient-restaurant-logo-template_23-2149282722.jpg'
					}
				]
			},
			// 教育/培训
			{
				category: 'education',
				items: [
					{
						title: '教育平台UI设计',
						image: 'https://img.freepik.com/free-vector/online-education-banner-template_23-2148688302.jpg'
					},
					{
						title: '培训机构VI设计',
						image: 'https://img.freepik.com/free-vector/gradient-online-courses-landing-page_23-2149128259.jpg'
					},
					{
						title: '教育APP界面设计',
						image:
							'https://img.freepik.com/free-vector/e-learning-education-template-vector-technology-ad-banner_53876-125996.jpg'
					},
					{
						title: '学校品牌形象设计',
						image: 'https://img.freepik.com/free-vector/flat-design-school-logo-template_23-2149496432.jpg'
					},
					{
						title: '儿童教育APP设计',
						image: 'https://img.freepik.com/free-vector/kids-education-app-interface_23-2148627944.jpg'
					},
					{
						title: '在线课程平台设计',
						image: 'https://img.freepik.com/free-vector/online-courses-concept_23-2148688305.jpg'
					},
					{
						title: '教育机构LOGO设计',
						image: 'https://img.freepik.com/free-vector/education-logo-template_23-2149324238.jpg'
					},
					{
						title: '培训课程海报设计',
						image: 'https://img.freepik.com/free-vector/training-courses-poster-template_23-2148620021.jpg'
					}
				]
			},
			// 金融
			{
				category: 'finance',
				items: [
					{
						title: '金融科技LOGO设计',
						image: 'https://img.freepik.com/free-vector/gradient-finance-logo-template_23-2149282219.jpg'
					},
					{
						title: '银行VI设计',
						image: 'https://img.freepik.com/free-vector/gradient-banking-logo-template_23-2149282227.jpg'
					},
					{
						title: '金融APP界面设计',
						image: 'https://img.freepik.com/free-vector/banking-app-interface-concept_52683-37582.jpg'
					},
					{
						title: '投资公司品牌设计',
						image: 'https://img.freepik.com/free-vector/gradient-stock-logo-template_23-2149283779.jpg'
					},
					{
						title: '支付平台UI设计',
						image: 'https://img.freepik.com/free-vector/payment-app-interface_23-2148627945.jpg'
					},
					{
						title: '金融数据可视化设计',
						image: 'https://img.freepik.com/free-vector/financial-dashboard-ui-template_23-2148620022.jpg'
					},
					{
						title: '保险公司VI设计',
						image: 'https://img.freepik.com/free-vector/insurance-company-identity-template_23-2149019868.jpg'
					},
					{
						title: '财务管理APP设计',
						image: 'https://img.freepik.com/free-vector/finance-management-app-interface_23-2148627946.jpg'
					}
				]
			},
			// 互联网
			{
				category: 'internet',
				items: [
					{
						title: '社交媒体APP设计',
						image: 'https://img.freepik.com/free-vector/social-media-app-interface_23-2148694773.jpg'
					},
					{
						title: '电商平台VI设计',
						image: 'https://img.freepik.com/free-vector/e-commerce-logo-template-design_23-2149282715.jpg'
					},
					{
						title: '互联网公司LOGO设计',
						image: 'https://img.freepik.com/free-vector/abstract-logo-template_23-2149234256.jpg'
					},
					{
						title: '网站界面设计',
						image: 'https://img.freepik.com/free-vector/website-template-design_23-2148452964.jpg'
					},
					{
						title: '视频平台UI设计',
						image: 'https://img.freepik.com/free-vector/video-streaming-app-interface_23-2148627947.jpg'
					},
					{
						title: '云服务品牌设计',
						image: 'https://img.freepik.com/free-vector/cloud-service-logo-template_23-2149282716.jpg'
					},
					{
						title: '数据分析平台设计',
						image: 'https://img.freepik.com/free-vector/data-analytics-dashboard-ui-template_23-2148620023.jpg'
					},
					{
						title: '即时通讯APP设计',
						image: 'https://img.freepik.com/free-vector/messaging-app-interface_23-2148627948.jpg'
					}
				]
			},
			// 企业服务
			{
				category: 'enterprise',
				items: [
					{
						title: '企业管理系统UI设计',
						image: 'https://img.freepik.com/free-vector/dashboard-user-panel-template_23-2148627943.jpg'
					},
					{
						title: '企业VI设计',
						image: 'https://img.freepik.com/free-vector/corporate-identity-template-design_23-2149019863.jpg'
					},
					{
						title: '企业宣传册设计',
						image: 'https://img.freepik.com/free-vector/business-brochure-template_23-2149054285.jpg'
					},
					{
						title: '企业LOGO设计',
						image: 'https://img.freepik.com/free-vector/business-logo-template_23-2149234252.jpg'
					},
					{
						title: 'CRM系统界面设计',
						image: 'https://img.freepik.com/free-vector/crm-dashboard-ui-template_23-2148620024.jpg'
					},
					{
						title: '企业官网设计',
						image: 'https://img.freepik.com/free-vector/corporate-website-template_23-2148620025.jpg'
					},
					{
						title: '企业邮件模板设计',
						image: 'https://img.freepik.com/free-vector/email-template-design_23-2148620026.jpg'
					},
					{
						title: '企业会议系统设计',
						image: 'https://img.freepik.com/free-vector/video-conference-app-interface_23-2148627949.jpg'
					}
				]
			},
			// 能源/制造/交通
			{
				category: 'energy',
				items: [
					{
						title: '能源公司LOGO设计',
						image: 'https://img.freepik.com/free-vector/gradient-energy-logo-template_23-2149270398.jpg'
					},
					{
						title: '制造业VI设计',
						image: 'https://img.freepik.com/free-vector/manufacturing-logo-template_23-2149282706.jpg'
					},
					{
						title: '交通APP界面设计',
						image: 'https://img.freepik.com/free-vector/transport-app-concept_23-2148629792.jpg'
					},
					{
						title: '工业品牌设计',
						image: 'https://img.freepik.com/free-vector/industrial-logo-template_23-2149282707.jpg'
					},
					{
						title: '能源监控系统设计',
						image: 'https://img.freepik.com/free-vector/energy-monitoring-dashboard-ui-template_23-2148620027.jpg'
					},
					{
						title: '智能交通系统界面',
						image: 'https://img.freepik.com/free-vector/smart-transportation-app-interface_23-2148627950.jpg'
					},
					{
						title: '制造业数据可视化',
						image: 'https://img.freepik.com/free-vector/manufacturing-dashboard-ui-template_23-2148620028.jpg'
					},
					{
						title: '新能源品牌设计',
						image: 'https://img.freepik.com/free-vector/renewable-energy-logo-template_23-2149282708.jpg'
					}
				]
			},
			// 文化传媒
			{
				category: 'culture',
				items: [
					{
						title: '媒体公司LOGO设计',
						image: 'https://img.freepik.com/free-vector/gradient-media-logo-template_23-2149282718.jpg'
					},
					{
						title: '文化活动海报设计',
						image: 'https://img.freepik.com/free-vector/cultural-event-poster-template_23-2148620019.jpg'
					},
					{
						title: '传媒公司VI设计',
						image: 'https://img.freepik.com/free-vector/media-company-identity-template_23-2149019865.jpg'
					},
					{
						title: '文化创意产品设计',
						image: 'https://img.freepik.com/free-vector/creative-product-design_23-2148620018.jpg'
					},
					{
						title: '影视制作LOGO设计',
						image: 'https://img.freepik.com/free-vector/film-production-logo-template_23-2149282719.jpg'
					},
					{
						title: '出版社品牌设计',
						image: 'https://img.freepik.com/free-vector/publishing-house-logo-template_23-2149282721.jpg'
					},
					{
						title: '音乐APP界面设计',
						image: 'https://img.freepik.com/free-vector/music-app-interface_23-2148627951.jpg'
					},
					{
						title: '艺术展览宣传设计',
						image: 'https://img.freepik.com/free-vector/art-exhibition-poster-template_23-2148620029.jpg'
					}
				]
			},
			// 健身
			{
				category: 'fitness',
				items: [
					{
						title: '健身APP界面设计',
						image: 'https://img.freepik.com/free-vector/fitness-app-concept_23-2148629793.jpg'
					},
					{
						title: '健身品牌LOGO设计',
						image: 'https://img.freepik.com/free-vector/gradient-fitness-logo-template_23-2149282720.jpg'
					},
					{
						title: '健身中心VI设计',
						image: 'https://img.freepik.com/free-vector/fitness-center-identity-template_23-2149019866.jpg'
					},
					{
						title: '运动产品包装设计',
						image: 'https://img.freepik.com/free-vector/sport-product-packaging-design_23-2148620020.jpg'
					},
					{
						title: '健康饮食APP设计',
						image: 'https://img.freepik.com/free-vector/healthy-diet-app-interface_23-2148627952.jpg'
					},
					{
						title: '瑜伽工作室品牌设计',
						image: 'https://img.freepik.com/free-vector/yoga-studio-logo-template_23-2149282723.jpg'
					},
					{
						title: '健身课程海报设计',
						image: 'https://img.freepik.com/free-vector/fitness-class-poster-template_23-2148620030.jpg'
					},
					{
						title: '运动追踪APP设计',
						image: 'https://img.freepik.com/free-vector/activity-tracker-app-interface_23-2148627953.jpg'
					}
				]
			},
			// 更多
			{
				category: 'more',
				items: [
					{
						title: '餐饮LOGO设计',
						image: 'https://img.freepik.com/free-vector/gradient-restaurant-logo-template_23-2149282722.jpg'
					},
					{
						title: '旅游APP界面设计',
						image: 'https://img.freepik.com/free-vector/travel-app-concept_23-2148629794.jpg'
					},
					{
						title: '医疗VI设计',
						image: 'https://img.freepik.com/free-vector/medical-identity-template_23-2149019867.jpg'
					},
					{
						title: '游戏UI设计',
						image: 'https://img.freepik.com/free-vector/game-ui-design_23-2148629795.jpg'
					},
					{
						title: '房地产品牌设计',
						image: 'https://img.freepik.com/free-vector/real-estate-logo-template_23-2149282724.jpg'
					},
					{
						title: '婚礼策划VI设计',
						image: 'https://img.freepik.com/free-vector/wedding-planner-identity-template_23-2149019869.jpg'
					},
					{
						title: '宠物APP界面设计',
						image: 'https://img.freepik.com/free-vector/pet-care-app-interface_23-2148627954.jpg'
					},
					{
						title: '美容品牌设计',
						image: 'https://img.freepik.com/free-vector/beauty-brand-logo-template_23-2149282725.jpg'
					}
				]
			}
		]);

		// 根据当前选中的分类过滤案例
		const filteredCases = computed(() => {
			const categoryData = allCases.value.find(item => item.category === activeCategory.value);
			return categoryData ? categoryData.items : [];
		});

		// 添加查看更多方法
		const viewMore = () => {
			// 可以是跳转到更多案例的页面
			console.log('查看更多案例');
			// this.$router.push('/more-cases');
		};

		// 城市数据
		const cities = ref([
			{ name: '北京VI设计', value: 'beijing' },
			{ name: '上海VI设计', value: 'shanghai' },
			{ name: '广州VI设计', value: 'guangzhou' },
			{ name: '深圳VI设计', value: 'shenzhen' },
			{ name: '杭州VI设计', value: 'hangzhou' },
			{ name: '成都VI设计', value: 'chengdu' },
			{ name: '天津VI设计', value: 'tianjin' },
			{ name: '南昌VI设计', value: 'nanchang' },
			{ name: '南宁VI设计', value: 'nanning' },
			{ name: '南京VI设计', value: 'nanjing' },
			{ name: '佛山VI设计', value: 'foshan' }
		]);

		// 当前选中的城市
		const selectedCity = ref({ name: '杭州市', value: 'hangzhou' });

		// 选择城市
		const selectCity = city => {
			selectedCity.value = city;
			showCityDropdown.value = false;
		};

		// 切换城市下拉菜单的显示状态
		const toggleCityDropdown = () => {
			showCityDropdown.value = !showCityDropdown.value;
		};

		// 添加点击外部关闭下拉菜单的处理
		onMounted(() => {
			document.addEventListener('click', e => {
				const dropdown = document.querySelector('.location-filter');
				if (dropdown && !dropdown.contains(e.target)) {
					showCityDropdown.value = false;
				}
			});
		});

		onUnmounted(() => {
			document.removeEventListener('click', () => {});
		});

		const handleInputChange = (value: string) => {
			if (activeTab.value === 'task') {
				searchText.value = value;
			} else if (activeTab.value === 'talent') {
				talentSearchText.value = value;
			} else if (activeTab.value === 'service') {
				serviceSearchText.value = value;
			}
		};

		// 显示客服消息
		const showKefuMessage = () => {
			message.info('客服服务时间：周一至周日 9:00-18:00');
		};

		return {
			searchText,
			talentSearchText,
			serviceSearchText,
			activeTag,
			showMobileMenu,
			activeTab,
			isScrolled,
			activeCardTab,
			logoUrl,
			navItems,
			carouselItems,
			statistics,
			services,
			designers,
			caseTags,
			cases,
			brands,
			hotTags,
			designServices,
			caseCategories,
			xuqiu,
			phone,
			rencai,
			scrollToTop,
			currentSlide,
			messageGroups,
			activeIndices,
			leavingIndices,
			designCases,
			designCases2,
			handleTagClick,
			categories,
			activeCategory,
			changeCategory,
			allCases,
			filteredCases,
			viewMore,
			showCityDropdown,
			cities,
			selectedCity,
			selectCity,
			toggleCityDropdown,
			handleInputChange,
			showKefuMessage
		};
	}
});
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.layout {
	min-height: 100vh;
	overflow-x: hidden;
}

.hero-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 440px; // 减少背景图片高度
	margin-top: -20px;
	padding: 0 20px;
	overflow: hidden;
	color: #333;
	text-align: center;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		content: '';
		background: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')
			center/cover no-repeat;
		opacity: 0.1;
	}

	.hero-content {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 1130px;
		margin: 0 auto;
		text-align: center;

		.hero-title,
		.hero-description {
			width: 100%;
		}

		.hero-title {
			font-size: 36px;
			font-weight: bold;
			margin-bottom: 16px;
			color: #333;
			text-align: center;
			margin-top: 100px; // 添加顶部外边距，使标题向下移动50px
		}

		.hero-description {
			font-size: 18px;
			color: #666;
			margin-bottom: 32px;
			text-align: center;
		}

		.search-wrapper {
			position: relative;
			z-index: 2;
			width: 100%;
			padding: 0;
			margin-top: 60px !important; // 向上移动60px

			.search-card {
				width: 100%;
				background: rgb(255 255 255 / 10%);
				backdrop-filter: blur(5px);
				border: 1px solid rgb(255 255 255 / 20%);
				border-radius: 12px;
				box-shadow: 0 8px 32px rgb(31 38 135 / 10%);

				:deep(.ant-card-body) {
					padding: 20px;
					width: 100%;
				}

				:deep(.ant-tabs-nav) {
					margin-bottom: 16px;
					border-bottom: none;

					.ant-tabs-tab {
						color: rgb(0 0 0 / 65%);

						&.ant-tabs-tab-active {
							.ant-tabs-tab-btn {
								color: #1890ff;
							}
						}
					}
				}

				.search-input-group {
					display: flex;
					gap: 10px;
					align-items: center;
					margin: 12px 0;

					.search-input {
						flex: 1;
						min-width: 300px;

						:deep(.ant-input) {
							background: rgb(255 255 255 / 80%);
							border: 1px solid rgb(255 255 255 / 50%);

							&:focus {
								background: #ffffff;
							}
						}
					}

					.ant-btn {
						height: 40px;
						padding: 0 16px;
						margin: 0;
						font-size: 14px;
					}
				}
			}
		}
	}
}

.banner-wrapper {
	padding: 20px 0;
	margin: 20px 0;
	background-color: #f8f9fa;
	border-radius: 12px;

	.banner-section {
		max-width: 1130px;
		margin: 0 auto;
		width: 100%;
		padding: 0 20px;

		.banner-container {
			display: flex;
			gap: 24px;
			justify-content: center;

			// 左侧轮播图
			.banner-left {
				flex: none;
				width: 480px;
				height: 320px;
				overflow: hidden;
				border-radius: 8px;
				box-shadow: 0 4px 12px rgb(0 0 0 / 8%);

				.custom-carousel {
					position: relative;
					width: 100%;
					height: 100%;

					.carousel-slides {
						width: 100%;
						height: 100%;

						.carousel-slide {
							width: 100%;
							height: 100%;

							img {
								display: block;
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}

					.carousel-dots {
						position: absolute;
						right: 0;
						bottom: 12px;
						left: 0;
						z-index: 10;
						display: flex;
						justify-content: center;

						.carousel-dot {
							width: 10px;
							height: 10px;
							margin: 0 5px;
							cursor: pointer;
							background: rgb(255 255 255 / 60%);
							border-radius: 50%;

							&.active {
								background: white;
							}
						}
					}
				}
			}

			// 右侧雇主卡片
			.banner-right {
				flex: none;
				width: 480px;

				.employer-card {
					height: 320px;
					overflow: hidden;
					border-radius: 8px;
					box-shadow: 0 4px 12px rgb(0 0 0 / 8%);

					:deep(.ant-card-body) {
						display: flex;
						flex-direction: column;
						height: 100%;
						padding: 0;
					}

					.card-tabs {
						display: flex;
						overflow: hidden;
						border-top-left-radius: 12px;
						border-top-right-radius: 12px;

						.tab-item {
							position: relative;
							flex: 1;
							padding: 16px 0;
							text-align: center;
							cursor: pointer;
							border-bottom: 1px solid #f0f0f0;
							transition: all 0.3s;

							h3 {
								margin: 0 0 8px;
								font-size: 18px;
								font-weight: 500;
								color: #333333;
							}

							p {
								margin: 0;
								font-size: 12px;
								color: #999999;
							}

							&:hover {
								background-color: #f9f9f9;
							}

							&.active {
								background-color: #ffffff;
								border-bottom: none;

								h3 {
									font-weight: 600;
									color: #333333;
								}
							}

							&:not(.active) {
								background-color: #f9f9f9;
							}
						}
					}

					.card-content {
						display: flex;
						flex: 1;
						flex-direction: column;
						padding: 20px;

						.feature-grid {
							display: flex;
							height: 100%;

							.feature-item {
								display: flex;
								flex: 1;
								flex-direction: column;
								align-items: center;
								padding: 10px;
								text-align: center;

								.feature-img {
									width: 60px;
									height: 60px;
									margin-bottom: 10px;
									object-fit: contain;
								}

								.feature-title {
									margin-bottom: 5px;
									font-size: 16px;
									font-weight: 500;
									color: #333333;
								}

								.feature-desc {
									margin-bottom: 10px;
									font-size: 12px;
									color: #999999;
								}

								.feature-btn {
									width: 70%;
									height: 32px;
									padding: 4px 16px;
									font-size: 14px;
									color: #666666;
									background: transparent;
									border: 1px solid #e8e8e8;
									border-radius: 18px;
									box-shadow: none;

									&:hover {
										color: #1890ff;
										text-decoration: none;
										border-color: #1890ff;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.section {
	padding: 80px 0;

	.section-content {
		width: 100%;
		max-width: 1200px;
		padding: 0 16px;
		margin: 0 auto;
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40px;

		h2 {
			margin: 0;
			font-size: 32px;
			font-weight: bold;
		}

		.case-filter {
			display: flex;
			gap: 24px;
			align-items: center;
		}
	}
}

.service-section {
	margin-top: -10px;
	padding: 40px 0;
	background: #f5f5f5;

	.service-card {
		width: calc(100% + 20px);
		margin: 0 auto;
		border-radius: 12px;
		transition: all 0.3s;

		&:hover {
			box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
			transform: translateY(-4px);
		}

		:deep(.ant-card-body) {
			height: calc(100% + 30px);
			padding: 16px;
		}

		:deep(.ant-card-meta-title) {
			overflow: hidden;
			font-size: 16px;
			font-weight: bold;
			color: #333333;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		:deep(.ant-card-meta-description) {
			overflow: hidden;
			font-size: 12px;
			color: #666666;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

// 设计师推荐区域样式
.designer-section {
	padding: 40px 0 0; // 保持原有内边距
	margin-top: -60px; // 向上移动，与下面的卡片重合
	background-color: #f5f5f5; // 保持原有背景色
	position: relative;
	z-index: 10; // 确保在下面卡片之上
}

.designer-header-card {
	width: 100%; // 占满整个屏幕宽度
	border-radius: 0;
	margin-bottom: 0;
	height: 180px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	z-index: 2;
	position: relative;
	top: -20px; // 调整向上移动的距离，保持与最里面的卡片重合但不影响与上方卡片的间距

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 20px 0; // 增加顶部内边距，往下移动20px
		margin-top: 20px; // 往下移动20px

		h2 {
			font-size: 24px;
			font-weight: bold;
			margin: 0;
		}

		.header-right {
			display: flex;
			align-items: center;

			.question {
				margin-right: 10px;
				color: #666;
			}

			.consult-btn {
				margin-right: 10px;
				border-color: #1890ff;
				color: #1890ff;
			}

			.evaluate-btn {
				background-color: #1890ff;
			}
		}
	}

	.design-tags {
		display: flex;
		margin-bottom: 20px;
		max-width: 1200px;
		margin: 20px auto 0; // 往下移动20px
		padding: 0 20px;

		.tag-btn {
			margin-right: 10px;
			border-radius: 4px;
			font-size: 14px;
			height: 32px;
			padding: 0 16px;
			background-color: #1890ff;
			color: white;
			border: none;

			&:hover {
				opacity: 0.9;
			}
		}
	}
}

.section-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	background-color: transparent;
	position: relative;
	z-index: 1;
	margin-top: -20px; // 向上移动，减小与顶部卡片的距离
}

.case-categories {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 10px;

	.category {
		margin-right: 20px;
		padding: 5px 0;
		cursor: pointer;
		font-size: 14px;
		color: #666;

		&.active {
			color: #1890ff;
			border-bottom: 2px solid #1890ff;
		}
	}

	.location-filter {
		margin-left: auto;
		color: #666;
		cursor: pointer;
		position: relative; // 添加相对定位

		// 城市下拉菜单
		.city-dropdown {
			position: absolute;
			top: 100%;
			right: 0; // 改为右对齐
			width: 150px;
			background-color: #fff;
			border: 1px solid #eee;
			border-radius: 4px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			padding: 10px;
			z-index: 1000;
			margin-top: 5px;
			max-height: 300px;
			overflow-y: auto;
		}

		.city-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.city-item {
			padding: 8px 12px;
			cursor: pointer;
			font-size: 14px;
			color: #333;

			&:hover {
				background-color: #f5f5f5;
			}
		}
	}
}

.case-section {
	background: #f5f5f5;

	.case-card {
		.case-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 16px;
			margin-top: 16px;
			font-size: 14px;
			border-top: 1px solid #f0f0f0;
		}
	}
}

.brand-section {
	text-align: center;

	h2 {
		margin-bottom: 48px;
		font-size: 32px;
		font-weight: bold;
	}

	.brand-item {
		padding: 24px;
		background: #f5f5f5;
		border-radius: 8px;
		transition: all 0.3s;

		img {
			width: 100%;
			height: 48px;
			object-fit: contain;
			filter: grayscale(1);
			transition: all 0.3s;
		}

		&:hover {
			background: #ffffff;
			box-shadow: 0 4px 12px rgb(0 0 0 / 10%);

			img {
				filter: grayscale(0);
			}
		}
	}
}

.footer {
	padding: 64px 0 24px;
	color: rgb(255 255 255 / 85%);
	background: #1a1a1a;

	.footer-content {
		max-width: 1200px;
		padding: 0 16px;
		margin: 0 auto;

		h3 {
			margin-bottom: 24px;
			font-size: 18px;
			color: #ffffff;
		}

		ul {
			li {
				margin-bottom: 12px;

				a {
					font-size: 14px;
					color: rgb(255 255 255 / 65%);
					transition: all 0.3s;

					&:hover {
						color: #ffffff;
					}
				}
			}
		}

		.contact-info {
			li {
				display: flex;
				gap: 8px;
				align-items: center;
				font-size: 14px;
			}
		}

		.footer-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 24px;
			margin-top: 48px;
			border-top: 1px solid rgb(255 255 255 / 10%);

			.copyright {
				font-size: 14px;
			}

			.social-links {
				display: flex;
				gap: 24px;

				a {
					font-size: 20px;
					color: rgb(255 255 255 / 65%);
					transition: all 0.3s;

					&:hover {
						color: #ffffff;
					}
				}
			}
		}
	}
}

.cases-dropdown {
	position: relative;
	left: 0;
	display: flex;
	gap: 40px;
	min-width: 960px;
	padding: 32px;
	margin-top: 2px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 3px 16px rgb(0 0 0 / 8%);
	transform: translateX(0);

	// 左侧服务列表
	.service-list {
		width: 180px;
		padding-right: 24px;
		border-right: 1px solid #f0f0f0;

		h4 {
			position: relative;
			margin-bottom: 24px;
			font-size: 15px;
			font-weight: 500;
			color: #333333;

			&::after {
				position: absolute;
				bottom: -8px;
				left: 0;
				width: 24px;
				height: 2px;
				content: '';
				background: #1890ff;
			}
		}

		.service-items {
			display: flex;
			flex-direction: column;
			gap: 12px;

			.service-item {
				padding: 2px 0;
				overflow: hidden;
				font-size: 14px;
				line-height: 1.5;
				color: #666666;
				text-overflow: ellipsis;
				white-space: nowrap;
				transition: all 0.3s;

				&.updating {
					color: #999999;

					&::after {
						margin-left: 4px;
						font-size: 12px;
						content: '（更新中）';
					}
				}

				&:hover {
					padding-left: 4px;
					color: #1890ff;
				}
			}
		}
	}

	// 分类列表
	.category-list {
		flex: 1;
		min-width: 160px;
		padding-top: 4px;

		.category-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 8px;
			margin-bottom: 20px;
			border-bottom: 1px solid #f5f5f5;

			h4 {
				font-size: 15px;
				font-weight: 500;
				color: #333333;
			}

			.view-all {
				font-size: 13px;
				color: #1890ff;
				cursor: pointer;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.category-items {
			display: flex;
			flex-direction: column;
			gap: 16px;

			.category-item {
				display: block;
				padding: 2px 0;
				font-size: 14px;
				color: #666666;
				transition: all 0.3s;

				&:hover {
					color: #1890ff;
					transform: translateX(4px);
				}
			}
		}

		// 城市网格布局
		.city-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16px 24px;
			margin-top: 4px;

			.city-item {
				padding: 2px 0;
				font-size: 14px;
				color: #666666;
				transition: all 0.3s;

				&:hover {
					color: #1890ff;
					transform: translateX(4px);
				}
			}
		}
	}

	// 分隔线样式
	.category-list + .category-list {
		position: relative;
		padding-left: 24px;

		&::before {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 1px;
			content: '';
			background: #f0f0f0;
		}
	}
}

// 完全重写特创易艺术字体样式
.logo-text {
	position: relative;
	display: inline-block;
	font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 0 1px rgb(255 255 255 / 20%);
	letter-spacing: 1px;
	white-space: nowrap;
	background-image: linear-gradient(135deg, #0070e0 0%, #6a11cb 100%);
	background-clip: text;
	background-clip: text;
	transition: transform 0.3s;
	transform-origin: center;
	-webkit-text-fill-color: transparent;

	// 增强3D效果和清晰度
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		color: transparent;
		content: '特创易';
		-webkit-text-stroke: 1.5px rgb(0 112 224 / 40%);
	}

	// 添加底部装饰线
	&::after {
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 2px;
		content: '';
		background: linear-gradient(90deg, transparent, rgb(106 17 203 / 70%), transparent);
		opacity: 0.8;
		transition: all 0.3s;
		transform: scaleX(0.7);
	}

	&:hover {
		transform: scale(1.05);

		&::after {
			opacity: 1;
			transform: scaleX(1);
		}
	}
}

// 回到顶部按钮样式
.back-to-top {
	position: fixed;
	right: 35px;
	bottom: 30px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	opacity: 0;
	transition: all 0.3s;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	&.show {
		opacity: 1;
	}
}

// 联系方式图标样式
.contact-icon {
	position: fixed;
	right: 30px;
	bottom: 100px;
	width: 60px;
	height: 60px;
	background-color: #0681f3 !important;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
	cursor: pointer;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease;

	&:hover {
		background-color: #40a9ff !important;
		transform: scale(1.1);
	}

	.contact-icon-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.contact-text {
		font-size: 12px;
		margin-top: 2px;
		color: white;
	}
}

/* 二维码弹出区域样式 */
.qrcode-popup {
	position: fixed;
	right: 105px; // 修改为105px，与联系方式图标保持15px间距
	bottom: 90px; // 与联系方式图标对齐
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); // 增强阴影效果
}

/* 添加悬停效果 */
.contact-icon:hover + .qrcode-popup {
	pointer-events: auto;
	opacity: 1;
}

/* 确保弹出区域可以点击 */
.qrcode-popup:hover {
	pointer-events: auto;
	opacity: 1;
}

// 页脚
.contact-popup {
	position: fixed;
	right: 90px;
	bottom: 80px;
	width: 250px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;

	.contact-popup-inner {
		padding: 15px;

		.contact-popup-header {
			text-align: center;
			font-size: 14px;
			color: #333;
			margin-bottom: 15px;
		}

		.contact-popup-qrcode {
			display: flex;
			justify-content: center;
			margin-bottom: 15px;

			img {
				width: 180px;
				height: 180px;
			}
		}

		.contact-popup-footer {
			.phone-number {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10px;
				font-size: 16px;
				color: #333;

				.anticon {
					margin-right: 5px;
					color: #1890ff;
				}
			}

			.contact-btn {
				width: 100%;
				height: 40px;
				border-radius: 20px;
			}
		}
	}
}

/* 添加悬停效果 */
.contact-icon:hover + .contact-popup {
	pointer-events: auto;
	opacity: 1;
}

// 消息滚动区域样式
.message-scroll-section {
	width: 100%;
	margin: 40px 0;
	padding: 0;
	margin-bottom: 60px; // 增加底部间距，与设计师推荐区域分开

	.message-card {
		width: 100%;
		border-radius: 0;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

		.message-scroll-container {
			display: flex;
			justify-content: space-between;
			gap: 24px;
			margin-bottom: 20px;
			padding: 0 20px;
			max-width: 1200px;
			margin: 0 auto;

			.message-column {
				flex: 1;
				border-radius: 4px;
				padding: 16px;
				background-color: transparent;

				.message-content-wrapper {
					height: 130px;
					overflow: hidden;
					position: relative;

					.message-content-scroll {
						position: relative;
						height: 100%;

						.message-item {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							padding: 12px 0;
							opacity: 0;

							// 从下往上滚动效果
							&.slide-up {
								transform: translateY(100%);
								transition: transform 0.5s ease, opacity 0.5s ease;

								&.active {
									transform: translateY(0);
									opacity: 1;
								}

								&.leaving {
									transform: translateY(-100%);
									opacity: 0;
								}
							}

							// 从上往下滚动效果
							&.slide-down {
								transform: translateY(-100%);
								transition: transform 0.5s ease, opacity 0.5s ease;

								&.active {
									transform: translateY(0);
									opacity: 1;
								}

								&.leaving {
									transform: translateY(100%);
									opacity: 0;
								}
							}

							// 淡入淡出效果
							&.fade {
								transform: scale(0.9);
								transition: opacity 0.5s ease, transform 0.5s ease;

								&.active {
									transform: scale(1);
									opacity: 1;
								}

								&.leaving {
									transform: scale(1.1);
									opacity: 0;
								}
							}

							.message-header {
								display: flex;
								align-items: center;
								margin-bottom: 12px;
								position: relative;

								.avatar-container {
									margin-right: 16px;

									.avatar {
										width: 60px;
										height: 60px;
										border-radius: 50%;
									}
								}

								.user-info {
									flex: 1;
									position: absolute;
									top: -6px;
									left: 76px;

									.user-type {
										margin-right: 8px;
										font-size: 15px;
										color: #666;
									}

									.user-name {
										font-size: 15px;
										font-weight: 500;
										// 颜色通过内联样式设置
									}
								}

								.message-time {
									position: absolute;
									right: 0;
									top: -6px;
									font-size: 14px;
									color: #999;
								}
							}

							// 修改消息气泡样式
							.message-bubble {
								position: relative;
								width: calc(100% - 76px);
								margin-left: 76px;
								padding: 10px 16px;
								background-color: var(--bg-color, #00c853);
								color: #ffffff;
								font-size: 15px;
								border-radius: 4px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								margin-top: -30px; // 向上移动到红框位置

								// 添加尖角
								&:before {
									content: '';
									position: absolute;
									left: -8px;
									top: 50%;
									transform: translateY(-50%);
									width: 0;
									height: 0;
									border-top: 8px solid transparent;
									border-bottom: 8px solid transparent;
									border-right: 8px solid var(--bg-color, #00c853);
								}
							}
						}
					}
				}
			}
		}

		.message-footer {
			text-align: center;
			font-size: 14px;
			color: #999;
			padding-top: 12px;
			padding-bottom: 8px;
			border-top: none;
			margin-top: 20px;
			transform: translateY(-8px);
		}
	}
}

// 从下往上滚动动画
@keyframes scrollUp {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

// 案例展示区域样式 - 完全重写，避免冲突
.case-showcase {
	position: relative;
	margin-bottom: 50px;

	.ant-row {
		margin: 0 -8px;

		.ant-col {
			padding: 0 8px;
			margin-bottom: 16px;

			.case-card {
				margin-bottom: 16px;
				transition: all 0.3s;
				border-radius: 0; // 移除圆角，改为直角
				overflow: hidden;

				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
				}

				:deep(.ant-card-body) {
					padding: 5px 10px;
					height: 50px;
					margin-bottom: 0;
				}

				.card-image-container {
					height: 160px;
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: transform 0.3s;
					}
				}

				.card-content {
					padding: 0;
					height: 45px;
					margin: 0;

					.card-title {
						font-size: 14px;
						font-weight: 500;
						color: #333;
						margin: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 45px;
					}
				}
			}
		}
	}

	/* 更多按钮容器 */
	.more-container {
		position: absolute;
		right: 0;
		bottom: 2px;
		text-align: right;
		width: 100%;

		.more-text {
			color: #1890ff;
			font-size: 14px;
			cursor: pointer;

			&:hover {
				color: #40a9ff;
				text-decoration: underline;
			}
		}
	}
}

/* 移除可能冲突的样式 */
.more-btn,
.more-link {
	display: none !important;
}

.case-showcase {
	.ant-row {
		.ant-col {
			.ant-card {
				.ant-card-body {
					.ant-card-meta {
						display: block !important; // 强制显示

						.ant-card-meta-title {
							display: block !important; // 强制显示
						}
					}
				}
			}
		}
	}
}

.location-filter {
	margin-left: auto;
	color: #666;
	cursor: pointer;
	position: relative;
}

// 修改轮播图和雇主卡片区域的样式
.banner-wrapper {
	.banner-section {
		.banner-container {
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			max-width: 1400px; // 再增加50px的整体最大宽度
			padding: 0 20px;
			margin: 0 auto; // 确保居中显示
			transform: translateX(-60px); // 整体向左移动10px

			// 左侧轮播图
			.banner-left {
				width: calc(49% + 70px); // 增加50px宽度

				.custom-carousel {
					width: 100%;
					height: 100%;
					border-radius: 4px;
					overflow: hidden;
				}
			}

			// 右侧雇主卡片
			.banner-right {
				width: calc(49% + 70px); // 增加50px宽度

				.employer-card {
					height: 100%;
					border-radius: 4px;
					overflow: hidden;
				}
			}
		}
	}
}

// 在样式部分添加或修改search-wrapper的样式
.hero-section {
	// 其他样式保持不变

	.hero-content {
		// 其他样式保持不变

		.search-wrapper {
			margin-top: 120px !important; // 增加到120px
			position: relative !important;
			top: 0 !important; // 重置top值
			// 其他样式保持不变

			// 新的简单搜索栏样式
			.search-bar-simple {
				display: flex;
				align-items: center;
				justify-content: flex-start; // 改为左对齐
				width: 100%;
				max-width: 1200px; // 增加最大宽度
				margin: 0;
				padding-left: 250px; // 添加左内边距，与任务标签对齐

				.search-input {
					flex: 1;
					margin-right: 10px;
					width: 100%; // 确保输入框占满可用空间
				}

				.ant-btn {
					margin-right: 10px;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
}

// 添加tab-nav的样式定义
.hero-section {
	.hero-content {
		.search-wrapper {
			margin-top: 120px !important;
			position: relative !important;
			top: 0 !important;

			// 添加标签导航样式
			.tab-nav {
				display: flex;
				justify-content: flex-start; // 左对齐
				margin-bottom: 15px;
				margin-left: 250px; // 增加左边距，与红色框对齐

				.tab-text {
					margin-right: 30px; // 增加右边距
					color: #666;
					font-size: 18px;
					cursor: pointer;
					padding: 5px 0;
					position: relative;

					&.active {
						color: #1890ff;
						font-weight: 500;

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 2px;
							background-color: #1890ff;
						}
					}

					&:hover {
						color: #40a9ff;
					}
				}
			}

			// 搜索栏样式
			.search-bar-simple {
				// 其他样式保持不变
			}
		}
	}
}

// 修改搜索框样式，使其更宽并居中
.hero-section {
	.hero-content {
		.search-wrapper {
			margin-top: 120px !important;
			position: relative !important;
			top: 0 !important;

			// 标签导航样式
			.tab-nav {
				display: flex;
				justify-content: center; // 居中对齐
				margin-bottom: 15px;
				margin-left: 0; // 移除左边距

				.tab-text {
					margin-right: 30px; // 增加右边距
					color: #666;
					font-size: 18px;
					cursor: pointer;
					padding: 5px 0;
					position: relative;

					&.active {
						color: #1890ff;
						font-weight: 500;

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 2px;
							background-color: #1890ff;
						}
					}

					&:hover {
						color: #40a9ff;
					}
				}
			}

			// 搜索栏样式
			.search-bar-simple {
				display: flex;
				align-items: center;
				justify-content: center; // 居中对齐
				width: 100%;
				max-width: 1280px; // 再增加80px宽度
				margin: 0 auto; // 添加自动边距使其居中
				padding-left: 0; // 移除左内边距

				.search-input {
					flex: 1;
					margin-right: 10px;
					width: 100%; // 确保输入框占满可用空间
					height: 50px; // 确保高度一致
				}

				.ant-btn {
					margin-right: 10px;
					height: 50px; // 确保高度一致

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
}

// 修改标签导航样式，使其与搜索框左边对齐
.hero-section {
	.hero-content {
		.search-wrapper {
			margin-top: 50px !important;
			position: relative !important;
			top: 0 !important;

			// 标签导航样式
			.tab-nav {
				display: flex;
				justify-content: flex-start; // 左对齐
				margin-bottom: 15px;
				padding-left: calc((100% - 1280px) / 2); // 与搜索框左边对齐

				.tab-text {
					margin-right: 30px; // 增加右边距
					color: #666;
					font-size: 18px;
					cursor: pointer;
					padding: 5px 0;
					position: relative;

					&.active {
						color: #1890ff;
						font-weight: 500;

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 2px;
							background-color: #1890ff;
						}
					}

					&:hover {
						color: #40a9ff;
					}
				}
			}
		}
	}
}

/* 修改联系图标样式 */
.contact-icon {
	position: fixed;
	right: 30px; // 修改为30px，与回到顶部按钮对齐
	bottom: 100px;
	width: 60px;
	height: 60px;
	background-color: #1890ff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
	cursor: pointer;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

	.contact-icon-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.anticon {
			font-size: 24px;
			margin-bottom: 2px;
		}

		.contact-text {
			font-size: 12px;
			line-height: 1;
		}
	}

	&:hover + .qrcode-popup {
		pointer-events: auto;
		opacity: 1;
	}
}

/* 修改二维码弹出区域样式，按照图片样式 */
.contact-popup {
	position: fixed;
	right: 90px;
	bottom: 80px;
	width: 250px;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;

	.contact-popup-inner {
		padding: 15px;

		.contact-popup-header {
			text-align: center;
			font-size: 14px;
			color: #333;
			margin-bottom: 15px;
		}

		.contact-popup-qrcode {
			display: flex;
			justify-content: center;
			margin-bottom: 15px;

			img {
				width: 180px;
				height: 180px;
			}
		}

		.contact-popup-footer {
			.phone-number {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10px;
				font-size: 16px;
				color: #333;

				.anticon {
					margin-right: 5px;
					color: #1890ff;
				}
			}

			.contact-btn {
				width: 100%;
				height: 40px;
				border-radius: 20px;
			}
		}
	}
}

/* 添加悬停效果 */
.contact-icon:hover + .contact-popup {
	pointer-events: auto;
	opacity: 1;
}

.kefu-icon {
	position: fixed;
	right: 30px;
	bottom: 178px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease;
	background-color: white;

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	&:hover {
		transform: scale(1.1);
	}
}
</style>
